<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>管理员查看单个用户</title>
  <style></style>
</head>

<body>
  <h1>查看单个用户</h1>
  <hr>
  <input type="text" placeholder="输入用户的名字" id="uname">
  <button id="btn" onclick="query()">查找</button>
  <hr>


  <table align="center" border="1px">
    <thead>
      <tr>
        <th style="width: 70px;">序号</th>
        <th style="width: 120px;">用户姓名</th>
        <th style="width:150px;">用户手机号</th>
        <th style="width: 70px;">是否会员</th>
      </tr>
    </thead>
    <tbody id="userlist"></tbody>
  </table>




  <script>
    //查询绑定事件
    function query() {


      //获取输入框输入的值
      let myuname = document.getElementById('uname').value
      console.log(myuname)
      //

      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            var result = JSON.parse(xhr.responseText);
            console.log(result);
            //调用显示用的函数showlist
            showlist(result.data);
          } else {
            console.log('数据返回错误');
          }
        }
      }
      xhr.open('POST', '/admin/queryname', true);

      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.send(`uname=${myuname}`);


    }




    //.创建用于遍历数据显示的showlist函数
    function showlist(arr) {
      var userlist = document.getElementById('userlist');
      //空字符
      var str = '';
      //遍历
      for (var i = 0; i < arr.length; i++) {
        str += `<tr>
            <td>${arr[i].u_id}</td>
            <td>${arr[i].u_names}</td>
            <td>${arr[i].u_phone}</td>
            <td>${arr[i].u_member}</td>
            <td><button onclick=del(${arr[i].u_id})>删除</button></td>
          </tr>`
      }
      // 插入到userlist标签中
      userlist.innerHTML = str;
    }
  </script>



</body>

</html>